<template>
<view class="coin">
	<cu-custom bgColor="bg-gradual-blue" :isBack="true">
		<block slot="backText">返回</block>
		<block slot="content">购物币</block>
	</cu-custom>	
    <view class="head">
		<view>
			<view class='money'>
				<image src="/static/assets.png"></image>
				<view>{{ info.custom }}</view>
				<view class="o-s">{{ info.currency }}</view>
			</view>
		</view>
    </view>
	<view class="tabs">
		<view :class="{act: act}">
			<view @tap="change(index, item)" :class="{ act: currentTab === index }" v-for="(item, index) in tabs" :key="index">{{ item.name }}</view>
		</view>
	</view>	
	<scroll-view scroll-y>
		<view class="list" v-if="list.length">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view>
					<view>{{ item.remark }}</view>
					<view>{{ item.createtime }}</view>
				</view>
				<view>+{{ item.cost_currency }}</view>
			</view>	
		</view>
		<empty-data color="#f9f9f9" src="/static/norecord.png" v-else></empty-data>
	</scroll-view>
</view>
</template>

<script>
	import { myCurrencyList, ShoppingMoney } from '@/common/api/users'
	export default {
		name: 'coin',
		data () {
			return {
				tabs: [{ name: '全部', type: 2 }, {name: '收入', type: 1}, {name: '支出', type: 0}],
				currentTab: 0,
				mycurrent: {
					type: 2,
					paginate: 1					
				},
				act: false,
				info: {},
				list: []
			}
		},
		onLoad() {
			this.getList()
			this.getMoney()
		},
		methods: {
			change(idx, item) {
				this.currentTab = idx
				this.noData = false
				this.mycurrent.paginate = 1
				this.mycurrent.type = item.type
				this.list = []
				this.getList()
			},
			getList () {
				uni.showLoading({ mask: true })
				myCurrencyList(this.mycurrent).then(res => {
					uni.hideLoading()
					if (res.code === 4000) {
						this.list = [...this.list, ...res.data]
					} else {
						if (this.mycurrent.paginate !== 1) {
							uni.showToast({
								icon: 'none',
								title: '没有更多记录了>_<'
							})
						}
					}
				})
			},
			getMoney () {				
				ShoppingMoney().then(res => {				
					if (!res.code) this.info = res.data
				})
			}
		}
	}
</script>


<style lang="less">
@import '../common/styles/variables.less';
.fixedBody;
.coin {
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	flex-flow: column;
	 .head {
		background-color:@headBg;
		color:white;
		padding: 50upx 0 50upx;
		& > view {
			display: flex;
			justify-content: center;
			align-items: center;
			.money {
				font-size: @title;
				display: flex;
				flex-flow: column;
				flex-direction: column;
				align-items: center;
				image {
					width: 120upx;
					height: 120upx;
					display: block;
				}
				.o-s {
					font-size:@title;
					font-weight: bold;
					text {
						font-size:@minSize;
						padding-right: 10upx;
					}
				}
			}
		}
	 }
	 .tabs {
		 height: @height;
		 & > view {
			 height: @height;
			 display: flex;
			 justify-content: center;
			 align-items: center;
			 background-color:white;
			 .border-bottom;		  
			 width: 100%;
			 & > view {
				 flex: 1;
				 height: 100%;
				 display: flex;
				 justify-content: center;
				 align-items: center;
				 position: relative;
				 &::after {
					 content:'';
					 position:absolute;
					 left: 0;
					 bottom: 0;
					 width: 100%;
					 border-top:4upx solid @red;
					 transform: scaleX(0);
					 transition: transform .2s;
					 will-change: transform;
				 }		 
				 &.act {
					 color:@red;
					 &::after {
						 transform: scaleX(.6);
					 }
				 }
			 }
			 &.act {
				 position: fixed;
				 top: 80upx;
				 /* #ifndef H5 */
				 top: 0;
				 /* #endif */
				 left: 0;
				 width: 100%;
				 z-index: 999;
			 }		 
		 }
	 }
	 scroll-view {
		 flex: 1;
		 overflow: hidden;
		 .list {
			 padding-top: 15upx;
			 .item {
				 display: flex;
				 justify-content: space-between;
				 align-items: center;
				 background-color:white;
				 border-radius: 10upx;
				 overflow: hidden;
				 padding: 15upx;
				 &:not(:last-of-type) {
					 .border-bottom(15upx)
				 }
				 &:last-of-type { margin-bottom: 0 }
				 & > view {
					 flex: 1;
					 &:first-of-type {
						 display: flex;
						 flex-direction: column;
						 flex-flow: column;
						 padding-right: 20upx;
						 & > view {
							 &:first-of-type {
								 .twoLine(2);
								 line-height: 1.4;
							 }
							&:last-of-type {
								font-size:@minSize;
								color:@gray;
							}
						 }
					 }
					 &:last-of-type {
						 max-width: 170upx;
						 display: flex;
						 align-items: center;
						 justify-content: flex-end;
						 color:@red;
						 font-weight: 600;
						 font-size:@minSize;
					 }
				 }
			 }
		   }	 
	 }
}
</style>